<template>
  <el-dialog title="编辑"
             v-model="visible"
             @close="close"
             :close-on-click-modal="false"
             class="form">
    <el-table :data="list" v-loading="loading" border>
      <el-table-column label="ID" prop="rjId" width="100" align="center"/>
      <el-table-column label="标题" prop="rjName" min-width="140" align="center"/>
      <el-table-column label="文件" prop="rjFile" width="80" align="center">
        <template v-slot="{row:{rjFile}}">
          <el-button link type="warning" @click="openPicture(rjFile)">
            预览
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="createTime" width="180" align="center"/>
    </el-table>
    <el-image-viewer show-progress
                     v-if="showPreview"
                     :url-list="[currentUrl]"
                     @close="showPreview = false"/>
    <template #footer>
      <el-button @click="close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import expoApi from "@/api/expo";
import Dic from "@/utils/dic"

export default {
  name: "expoListDetail",
  props: {
    modelValue: {},
    info: {},
    close: {
      required: true,
      type: Function,
    },
    refresh: {
      required: true,
      type: Function,
    }
  },
  data() {
    return {
      Dic,
      visible: false,
      loading: false,
      queryParam: {
        rjPid: "",
      },
      list: [],
      showPreview: false,
      currentUrl: ""
    };
  },
  watch: {
    modelValue(value) {
      this.visible = value
      if (this.info.id && value) {
        this.$nextTick(() => {
          this.queryParam.rjPid = this.info.id;
          this.loadList();
        })
      }
    },
  },

  methods: {
    loadList() {
      this.loading = true
      expoApi.logList({rjPid: this.queryParam.rjPid}).then(res => {
        this.list = res.data
        this.loading = false
      })
    },
    openPicture(value) {
      this.showPreview = true;
      this.currentUrl = Dic.OldFile(value)
    }
  }
}
</script>
<style lang="scss" scoped>
.cell-item {
  display: flex;
  align-items: center;
}
</style>